<template>
  <el-form-item :label="`${title}服务用具配置`" :prop="`${prefix}DetailList`">
    <div class="flex flex-col justify-start">
      <div v-for="(item, index) in model[`${prefix}DetailList`]" :key="item.id || index" class="flex mb-5px items-center">
        <!-- 显示行号而不是空白输入框 -->
        <!-- <div class="!w-40px text-center font-medium">{{ index + 1 }}</div> -->
        <el-select 
          placeholder="请选择服务用具" 
          filterable 
          class="!w-240px mr-2" 
          v-model="item.supplyId"
          :disabled="!canEdit"
          @change="updateModel"
        >
          <el-option
            v-for="simple in SimpleList"
            :key="simple.id"
            :label="simple.name"
            :value="String(simple.id)"
          />
        </el-select>
        <el-input 
          class="!w-160px mx-2" 
          v-model.number="item.supplyQty"
          :disabled="!canEdit"
          placeholder="请输入数量"
          @input="updateModel"
        >
          <template #append>{{ unit(item.supplyId) }}</template>
        </el-input>
        <el-button
          type="danger"
          style="margin-left: 20px"
          @click="delHandler(index)"
          v-if="index != 0 && canEdit"
          ><Icon icon="ep:delete" class="mr-5px" />删除</el-button
        >
      </div>
      <el-button 
        @click="addHandler()"
        v-if="canEdit"
      ><Icon icon="ep:plus" class="mr-5px" />添加一行{{ title }}餐具数据</el-button>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Icon } from '@/components/Icon' // 添加Icon组件导入

defineOptions({ name: 'TablewareProducePlanItem' })

// 定义类型
interface SimpleItem {
  id: number | string
  name: string
  standardName: string
}

interface DetailItem {
  id?: string | number
  supplyId?: string | number
  supplyQty?: number
}

interface ModelData {
  [key: string]: any
}

// 使用v-model语法糖的标准定义方式
const props = defineProps<{
  title: string
  prefix: string
  modelValue: ModelData
  SimpleList: SimpleItem[]
  canEdit?: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: ModelData]
}>()

// 计算属性用于简化访问
const model = computed(() => props.modelValue)

/** 计算规格 */
const unit = computed(() => {
  return (id?: string | number) => {
    if (!id) return ''
    const item = props.SimpleList.find((item) => String(item.id) === String(id))
    return item ? item.standardName : ''
  }
})

/** 更新整个model */
const updateModel = () => {
  // 创建一个深拷贝以避免直接修改props
  const updatedModel = JSON.parse(JSON.stringify(props.modelValue))
  emit('update:modelValue', updatedModel)
}

/** 添加一行 */
const addHandler = () => {
  const key = `${props.prefix}DetailList`
  // 创建一个深拷贝以避免直接修改props
  const updatedModel = JSON.parse(JSON.stringify(props.modelValue))
  
  if (!updatedModel[key]) {
    updatedModel[key] = [] as DetailItem[]
  }
  
  updatedModel[key].push({
    id: undefined,
    supplyId: undefined,
    supplyQty: undefined
  })
  
  emit('update:modelValue', updatedModel)
}

/** 删除一行 */
const delHandler = (index: number) => {
  const key = `${props.prefix}DetailList`
  // 创建一个深拷贝以避免直接修改props
  const updatedModel = JSON.parse(JSON.stringify(props.modelValue))
  
  if (updatedModel[key] && Array.isArray(updatedModel[key])) {
    updatedModel[key].splice(index, 1)
    emit('update:modelValue', updatedModel)
  }
}
</script>

<style scoped>
.mb-5px {
  margin-bottom: 5px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.mx-2 {
  margin-right: 8px;
  margin-left: 8px;
}

.mr-5px {
  margin-right: 5px;
}

.font-medium {
  font-weight: 500;
}

.text-center {
  text-align: center;
}
</style>
